<template>
  <div class="match-analysis-container">
    <div class="analysis-header">
      <div class="header-content">
        <h1>匹配度分析</h1>
        <p>详细分析您与目标职位的匹配程度</p>
      </div>
      <div class="header-actions">
        <el-button @click="goBack">
          <el-icon><ArrowLeft /></el-icon>
          返回
        </el-button>
      </div>
    </div>
    
    <!-- 职位信息 -->
    <div class="job-overview">
      <div class="job-header">
        <div class="company-info">
          <div class="company-logo">
            <div class="logo-placeholder">{{ job.company.charAt(0) }}</div>
          </div>
          <div class="job-details">
            <h2>{{ job.position }}</h2>
            <p class="company-name">{{ job.company }}</p>
            <div class="job-meta">
              <span class="meta-item">
                <el-icon><Location /></el-icon>
                {{ job.location }}
              </span>
              <span class="meta-item">
                <el-icon><Money /></el-icon>
                {{ job.salary }}
              </span>
              <span class="meta-item">
                <el-icon><User /></el-icon>
                {{ job.experience }}
              </span>
            </div>
          </div>
        </div>
        
        <div class="overall-match">
          <div class="match-circle">
            <el-progress 
              type="circle" 
              :percentage="overallMatch" 
              :width="120"
              :stroke-width="8"
              :color="getMatchColor(overallMatch)"
            />
            <div class="match-label">总体匹配度</div>
          </div>
          
          <div class="match-recommendation">
            <el-tag 
              :type="getRecommendationType(overallMatch)"
              size="large"
              class="recommendation-tag"
            >
              {{ getRecommendationText(overallMatch) }}
            </el-tag>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 详细匹配分析 -->
    <div class="detailed-analysis">
      <h3>详细匹配分析</h3>
      
      <div class="analysis-grid">
        <!-- 技能匹配 -->
        <div class="analysis-card">
          <div class="card-header">
            <h4>技能匹配</h4>
            <div class="score-badge">{{ skillMatch }}%</div>
          </div>
          
          <div class="skill-comparison">
            <div class="skill-section">
              <h5>已掌握技能</h5>
              <div class="skill-list">
                <el-tag 
                  v-for="skill in matchedSkills" 
                  :key="skill"
                  type="success"
                  class="skill-tag"
                >
                  <el-icon><Check /></el-icon>
                  {{ skill }}
                </el-tag>
              </div>
            </div>
            
            <div class="skill-section">
              <h5>缺失技能</h5>
              <div class="skill-list">
                <el-tag 
                  v-for="skill in missingSkills" 
                  :key="skill"
                  type="danger"
                  class="skill-tag"
                >
                  <el-icon><Close /></el-icon>
                  {{ skill }}
                </el-tag>
              </div>
            </div>
            
            <div class="skill-section">
              <h5>加分技能</h5>
              <div class="skill-list">
                <el-tag 
                  v-for="skill in bonusSkills" 
                  :key="skill"
                  type="warning"
                  class="skill-tag"
                >
                  <el-icon><Star /></el-icon>
                  {{ skill }}
                </el-tag>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 经验匹配 -->
        <div class="analysis-card">
          <div class="card-header">
            <h4>经验匹配</h4>
            <div class="score-badge">{{ experienceMatch }}%</div>
          </div>
          
          <div class="experience-analysis">
            <div class="experience-item">
              <div class="experience-label">工作年限</div>
              <div class="experience-comparison">
                <span class="current-value">{{ candidateProfile.experience }}年</span>
                <span class="vs">vs</span>
                <span class="required-value">{{ job.experienceRequired }}年</span>
              </div>
              <el-progress 
                :percentage="experienceYearsMatch" 
                :stroke-width="6"
                :color="getMatchColor(experienceYearsMatch)"
              />
            </div>
            
            <div class="experience-item">
              <div class="experience-label">相关行业经验</div>
              <div class="experience-comparison">
                <span class="current-value">{{ candidateProfile.industryExperience }}年</span>
                <span class="vs">vs</span>
                <span class="required-value">优先</span>
              </div>
              <el-progress 
                :percentage="industryMatch" 
                :stroke-width="6"
                :color="getMatchColor(industryMatch)"
              />
            </div>
            
            <div class="experience-item">
              <div class="experience-label">项目经验</div>
              <div class="project-tags">
                <el-tag 
                  v-for="project in candidateProfile.projectTypes" 
                  :key="project"
                  size="small"
                >
                  {{ project }}
                </el-tag>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 教育背景匹配 -->
        <div class="analysis-card">
          <div class="card-header">
            <h4>教育背景</h4>
            <div class="score-badge">{{ educationMatch }}%</div>
          </div>
          
          <div class="education-analysis">
            <div class="education-item">
              <div class="education-label">学历水平</div>
              <div class="education-comparison">
                <span class="current-value">{{ candidateProfile.education }}</span>
                <span class="vs">vs</span>
                <span class="required-value">{{ job.educationRequired }}</span>
              </div>
              <el-progress 
                :percentage="educationLevelMatch" 
                :stroke-width="6"
                :color="getMatchColor(educationLevelMatch)"
              />
            </div>
            
            <div class="education-item">
              <div class="education-label">专业相关性</div>
              <div class="education-comparison">
                <span class="current-value">{{ candidateProfile.major }}</span>
                <span class="vs">vs</span>
                <span class="required-value">{{ job.preferredMajor }}</span>
              </div>
              <el-progress 
                :percentage="majorMatch" 
                :stroke-width="6"
                :color="getMatchColor(majorMatch)"
              />
            </div>
          </div>
        </div>
        
        <!-- 软技能匹配 -->
        <div class="analysis-card">
          <div class="card-header">
            <h4>软技能</h4>
            <div class="score-badge">{{ softSkillsMatch }}%</div>
          </div>
          
          <div class="soft-skills-radar">
            <div class="radar-chart">
              <div class="radar-pentagon">
                <div 
                  v-for="(skill, index) in softSkills" 
                  :key="skill.name"
                  class="skill-point"
                  :style="getRadarPointStyle(skill, index)"
                  :title="`${skill.name}: ${skill.score}分`"
                ></div>
              </div>
              <div class="radar-labels">
                <span 
                  v-for="(skill, index) in softSkills" 
                  :key="skill.name"
                  class="radar-label"
                  :style="getRadarLabelStyle(index)"
                >
                  {{ skill.name }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- AI 分析报告 -->
    <div class="ai-analysis">
      <h3>AI 分析报告</h3>
      
      <div class="analysis-sections">
        <div class="analysis-section">
          <div class="section-header">
            <div class="section-icon positive">
              <el-icon><Check /></el-icon>
            </div>
            <h4>优势分析</h4>
          </div>
          <div class="section-content">
            <ul>
              <li v-for="advantage in aiAnalysis.advantages" :key="advantage">
                {{ advantage }}
              </li>
            </ul>
          </div>
        </div>
        
        <div class="analysis-section">
          <div class="section-header">
            <div class="section-icon warning">
              <el-icon><Warning /></el-icon>
            </div>
            <h4>待提升项</h4>
          </div>
          <div class="section-content">
            <ul>
              <li v-for="improvement in aiAnalysis.improvements" :key="improvement">
                {{ improvement }}
              </li>
            </ul>
          </div>
        </div>
        
        <div class="analysis-section">
          <div class="section-header">
            <div class="section-icon info">
              <el-icon><Lightbulb /></el-icon>
            </div>
            <h4>提升建议</h4>
          </div>
          <div class="section-content">
            <ul>
              <li v-for="suggestion in aiAnalysis.suggestions" :key="suggestion">
                {{ suggestion }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 行动计划 -->
    <div class="action-plan">
      <h3>个人提升计划</h3>
      
      <div class="plan-timeline">
        <div class="timeline-item" v-for="(plan, index) in improvementPlan" :key="index">
          <div class="timeline-dot" :class="plan.priority"></div>
          <div class="timeline-content">
            <div class="timeline-header">
              <h4>{{ plan.title }}</h4>
              <el-tag :type="getPriorityType(plan.priority)" size="small">
                {{ getPriorityText(plan.priority) }}
              </el-tag>
            </div>
            <p class="timeline-description">{{ plan.description }}</p>
            <div class="timeline-actions">
              <span class="timeline-duration">预计用时: {{ plan.duration }}</span>
              <div class="timeline-resources">
                <el-button 
                  v-for="resource in plan.resources" 
                  :key="resource.name"
                  type="text" 
                  size="small"
                  @click="openResource(resource.url)"
                >
                  {{ resource.name }}
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 操作按钮 -->
    <div class="action-buttons">
      <el-button 
        v-if="overallMatch >= job.requiredMatch"
        type="primary" 
        size="large"
        @click="applyForJob"
      >
        <el-icon><Check /></el-icon>
        立即申请此职位
      </el-button>
      <el-button 
        v-else
        type="primary" 
        size="large"
        @click="startImprovement"
      >
        <el-icon><Edit /></el-icon>
        开始能力提升
      </el-button>
      
      <el-button size="large" @click="shareAnalysis">
        <el-icon><Share /></el-icon>
        分享分析结果
      </el-button>
      
      <el-button size="large" @click="saveReport">
        <el-icon><Download /></el-icon>
        保存报告
      </el-button>
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { 
  ArrowLeft, 
  Location, 
  Money, 
  User, 
  Check, 
  Close, 
  Star, 
  Warning, 
  Lightbulb, 
  Edit, 
  Share, 
  Download 
} from '@element-plus/icons-vue'

export default {
  name: 'MatchAnalysisView',
  components: {
    ArrowLeft,
    Location,
    Money,
    User,
    Check,
    Close,
    Star,
    Warning,
    Lightbulb,
    Edit,
    Share,
    Download
  },
  setup() {
    const router = useRouter()
    const route = useRoute()
    
    // 模拟职位数据
    const job = reactive({
      id: route.params.id,
      position: '前端开发工程师',
      company: '阿里巴巴',
      location: '杭州',
      salary: '20-35K',
      experience: '3-5年',
      experienceRequired: 3,
      educationRequired: '本科',
      preferredMajor: '计算机相关',
      requiredMatch: 70,
      requiredSkills: ['Vue.js', 'React', 'JavaScript', 'TypeScript', 'CSS', 'HTML'],
      preferredSkills: ['Node.js', 'Webpack', 'Git', 'HTTP']
    })
    
    // 候选人档案
    const candidateProfile = reactive({
      name: '张三',
      experience: 4,
      industryExperience: 3,
      education: '本科',
      major: '计算机科学与技术',
      skills: ['Vue.js', 'JavaScript', 'CSS', 'HTML', 'Python', 'Git'],
      projectTypes: ['Web应用', '移动端', '后台管理']
    })
    
    // 匹配分析结果
    const overallMatch = ref(78)
    const skillMatch = ref(75)
    const experienceMatch = ref(85)
    const educationMatch = ref(90)
    const softSkillsMatch = ref(72)
    const experienceYearsMatch = ref(80)
    const industryMatch = ref(90)
    const educationLevelMatch = ref(90)
    const majorMatch = ref(95)
    
    const matchedSkills = computed(() => {
      return candidateProfile.skills.filter(skill => 
        job.requiredSkills.includes(skill) || job.preferredSkills.includes(skill)
      )
    })
    
    const missingSkills = computed(() => {
      return job.requiredSkills.filter(skill => 
        !candidateProfile.skills.includes(skill)
      )
    })
    
    const bonusSkills = computed(() => {
      return candidateProfile.skills.filter(skill => 
        !job.requiredSkills.includes(skill) && !job.preferredSkills.includes(skill)
      )
    })
    
    const softSkills = ref([
      { name: '沟通能力', score: 75 },
      { name: '团队协作', score: 80 },
      { name: '学习能力', score: 85 },
      { name: '解决问题', score: 78 },
      { name: '时间管理', score: 70 }
    ])
    
    const aiAnalysis = reactive({
      advantages: [
        '工作经验符合要求，有4年前端开发经验',
        '教育背景匹配度高，计算机相关专业背景',
        '核心技能掌握扎实，Vue.js和JavaScript能力突出',
        '有丰富的项目经验，涵盖多种项目类型'
      ],
      improvements: [
        '缺少React框架经验，这是该职位的重要技能',
        'TypeScript技能需要补强',
        '缺乏Node.js后端开发经验',
        '构建工具(Webpack)使用经验不足'
      ],
      suggestions: [
        '建议学习React框架，可通过在线课程和实践项目提升',
        '参加TypeScript培训或自学，提升代码质量',
        '了解Node.js基础，增强全栈开发能力',
        '学习现代前端构建工具，提升开发效率'
      ]
    })
    
    const improvementPlan = ref([
      {
        title: '学习React框架',
        description: '掌握React核心概念、组件开发、状态管理等',
        priority: 'high',
        duration: '2-3个月',
        resources: [
          { name: 'React官方文档', url: 'https://reactjs.org' },
          { name: '在线课程', url: '#' }
        ]
      },
      {
        title: '提升TypeScript技能',
        description: '学习TypeScript语法、类型系统、在项目中的应用',
        priority: 'high',
        duration: '1-2个月',
        resources: [
          { name: 'TypeScript手册', url: 'https://www.typescriptlang.org' },
          { name: '实战教程', url: '#' }
        ]
      },
      {
        title: '学习构建工具',
        description: '掌握Webpack、Vite等现代构建工具的使用',
        priority: 'medium',
        duration: '3-4周',
        resources: [
          { name: 'Webpack指南', url: 'https://webpack.js.org' },
          { name: '实践项目', url: '#' }
        ]
      },
      {
        title: '了解Node.js',
        description: '学习Node.js基础，增强全栈开发能力',
        priority: 'low',
        duration: '4-6周',
        resources: [
          { name: 'Node.js文档', url: 'https://nodejs.org' },
          { name: '入门教程', url: '#' }
        ]
      }
    ])
    
    const getMatchColor = (score) => {
      if (score >= 80) return '#67C23A'
      if (score >= 60) return '#E6A23C'
      return '#F56C6C'
    }
    
    const getRecommendationType = (score) => {
      if (score >= 80) return 'success'
      if (score >= 60) return 'warning'
      return 'danger'
    }
    
    const getRecommendationText = (score) => {
      if (score >= 80) return '强烈推荐申请'
      if (score >= 60) return '建议提升后申请'
      return '需要大幅提升'
    }
    
    const getPriorityType = (priority) => {
      const typeMap = {
        high: 'danger',
        medium: 'warning',
        low: 'info'
      }
      return typeMap[priority] || 'default'
    }
    
    const getPriorityText = (priority) => {
      const textMap = {
        high: '高优先级',
        medium: '中优先级',
        low: '低优先级'
      }
      return textMap[priority] || '未知'
    }
    
    const getRadarPointStyle = (skill, index) => {
      const angle = (index * 72 - 90) * Math.PI / 180
      const radius = 60
      const x = Math.cos(angle) * radius * (skill.score / 100)
      const y = Math.sin(angle) * radius * (skill.score / 100)
      
      return {
        left: `calc(50% + ${x}px)`,
        top: `calc(50% + ${y}px)`
      }
    }
    
    const getRadarLabelStyle = (index) => {
      const angle = (index * 72 - 90) * Math.PI / 180
      const radius = 80
      const x = Math.cos(angle) * radius
      const y = Math.sin(angle) * radius
      
      return {
        left: `calc(50% + ${x}px)`,
        top: `calc(50% + ${y}px)`
      }
    }
    
    const goBack = () => {
      router.back()
    }
    
    const applyForJob = () => {
      router.push('/candidate/search-interviews')
    }
    
    const startImprovement = () => {
      // 跳转到学习计划页面或显示学习资源
      console.log('开始能力提升')
    }
    
    const shareAnalysis = () => {
      // 实现分享功能
      console.log('分享分析结果')
    }
    
    const saveReport = () => {
      // 实现保存报告功能
      console.log('保存报告')
    }
    
    const openResource = (url) => {
      if (url !== '#') {
        window.open(url, '_blank')
      }
    }
    
    return {
      job,
      candidateProfile,
      overallMatch,
      skillMatch,
      experienceMatch,
      educationMatch,
      softSkillsMatch,
      experienceYearsMatch,
      industryMatch,
      educationLevelMatch,
      majorMatch,
      matchedSkills,
      missingSkills,
      bonusSkills,
      softSkills,
      aiAnalysis,
      improvementPlan,
      getMatchColor,
      getRecommendationType,
      getRecommendationText,
      getPriorityType,
      getPriorityText,
      getRadarPointStyle,
      getRadarLabelStyle,
      goBack,
      applyForJob,
      startImprovement,
      shareAnalysis,
      saveReport,
      openResource
    }
  }
}
</script>

<style scoped>
.match-analysis-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  background: #f8f9fa;
  min-height: 100vh;
}

.analysis-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.header-content h1 {
  color: #333;
  margin-bottom: 8px;
}

.header-content p {
  color: #666;
  margin: 0;
}

.job-overview,
.detailed-analysis,
.ai-analysis,
.action-plan {
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
}

.job-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.company-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.company-logo {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: #f0f2f5;
}

.logo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 24px;
  font-weight: 600;
}

.job-details h2 {
  color: #333;
  margin: 0 0 4px 0;
}

.company-name {
  color: #666;
  margin: 0 0 8px 0;
}

.job-meta {
  display: flex;
  gap: 16px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #666;
  font-size: 14px;
}

.overall-match {
  text-align: center;
}

.match-circle {
  margin-bottom: 16px;
}

.match-label {
  margin-top: 8px;
  color: #666;
  font-size: 14px;
}

.recommendation-tag {
  font-size: 16px;
  padding: 8px 16px;
}

.detailed-analysis h3,
.ai-analysis h3,
.action-plan h3 {
  color: #333;
  margin-bottom: 20px;
}

.analysis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
}

.analysis-card {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.card-header h4 {
  color: #333;
  margin: 0;
}

.score-badge {
  background: #6753C0;
  color: white;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 500;
}

.skill-comparison {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.skill-section h5 {
  color: #333;
  margin: 0 0 8px 0;
}

.skill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.skill-tag {
  display: flex;
  align-items: center;
  gap: 4px;
}

.experience-analysis,
.education-analysis {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.experience-item,
.education-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.experience-label,
.education-label {
  color: #333;
  font-weight: 500;
  font-size: 14px;
}

.experience-comparison,
.education-comparison {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.current-value {
  color: #333;
  font-weight: 500;
}

.vs {
  color: #666;
}

.required-value {
  color: #666;
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.soft-skills-radar {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.radar-chart {
  position: relative;
  width: 160px;
  height: 160px;
}

.radar-pentagon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #e4e7ed;
  border-radius: 50%;
}

.skill-point {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #6753C0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.radar-labels {
  position: absolute;
  top: -20px;
  left: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
}

.radar-label {
  position: absolute;
  font-size: 12px;
  color: #666;
  transform: translate(-50%, -50%);
}

.analysis-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.analysis-section {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 20px;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.section-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-icon.positive {
  background: #d4edda;
  color: #155724;
}

.section-icon.warning {
  background: #fff3cd;
  color: #856404;
}

.section-icon.info {
  background: #cce5ff;
  color: #0056b3;
}

.section-header h4 {
  color: #333;
  margin: 0;
}

.section-content ul {
  margin: 0;
  padding-left: 20px;
}

.section-content li {
  color: #666;
  line-height: 1.6;
  margin-bottom: 8px;
}

.plan-timeline {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
}

.timeline-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 12px;
  top: 32px;
  bottom: -24px;
  width: 2px;
  background: #e4e7ed;
}

.timeline-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}

.timeline-dot.high {
  background: #f56c6c;
}

.timeline-dot.medium {
  background: #e6a23c;
}

.timeline-dot.low {
  background: #909399;
}

.timeline-content {
  flex: 1;
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.timeline-header h4 {
  color: #333;
  margin: 0;
}

.timeline-description {
  color: #666;
  margin: 0 0 12px 0;
  line-height: 1.5;
}

.timeline-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.timeline-duration {
  color: #666;
  font-size: 14px;
}

.timeline-resources {
  display: flex;
  gap: 8px;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}
</style> 